// 提取所有的公共数据部分 
let area = '全部';
let order = '全部';

// 用于分页的初始化数据
// 默认偏移数量
let limit = 18;
// 偏移初始量
let offset = 0;
// 开始的页码
let pageid = 0;
// 上一页
let prev;
// next页
let next;
// 最后一页
let last;
// 声明一个最大页
let maxpage;
// 绑定事件函数，方便页面分页开始

// 获取节点，绑定事件
const areas = document.querySelectorAll('.areas');
const types = document.querySelectorAll('.types');
// console.log(areas, types)
areas.forEach(function (item, index) {

    item.addEventListener('click', function (evt) {
        areas.forEach(function (item, index) {
            item.classList.remove('btnColor');
        })
        this.classList.add('btnColor');
        // console.log(this.innerHTML)
        area = this.innerHTML;
        pageid = 0;
        chkLis(pageid)
    })
})
types.forEach(function (item, index) {
    item.addEventListener('click', function (evt) {
        types.forEach(function (item, index) {
            item.classList.remove('btnColor');
        })
        this.classList.add('btnColor');
        // console.log(this.innerHTML)
        order = this.innerHTML;
        pageid = 0;
        chkLis(pageid)
    })
})

function chkLis(pageid) {
    Ajax({
        url: 'http://localhost:3000/mv/all',
        params: {
            area: area,
            type: order,
            limit: limit,
            offset: limit * pageid,
        },
        type: 'get',
    }).then(function resolve(res) {
        // console.log(res.playlists);
        // console.log(res);
        // 计算出最大页码
        maxpage = Math.ceil(res.count / limit);
        // console.log(maxpage)

        // 初始化 渲染数据 默认第1页
        // 渲染页码栏
        // 计算页码栏
        // 这里的页码栏是每次获取limit+offset的数据量
        prev = pageid - 1;
        if (prev < 1) prev = 1;
        // console.log(prev)

        //循环页码加1，并且判断最否达到最大页 
        next = pageid + 1;
        if (next > maxpage) next = maxpage;
        // console.log(next)
        // console.log(maxpage - 1)
        last = maxpage - 1;
        // console.log(last)
        let pager = new Map([
            ['首页', 0],
            ['上页', prev],
            ['下页', next],
            ['尾页', last]
        ]);

        // 页面开始展示渲染
        // template.defaults.imports.dateFormat = function (date, format) {
        //     var num = date / 10000;
        //     return num + '万';
        // };
        // console.log(res.data)
        let tpl = template('tpl', {
            data: res.data,
        });

        const cont = document.querySelector('#cont');
        cont.innerHTML = tpl;
        const linkAlls = document.querySelectorAll('.modCover');
        // console.log(links);
        Array.from(linkAlls).forEach(function (item, index) {
            item.addEventListener('click', function (evt) {
                const event = evt.currentTarget;
                event.href = event.href + "?" + event.dataset.src;
            })
        })

        let page = template('page', {
            pager,
        });
        const fpage = document.querySelector('.pageation');
        fpage.innerHTML = page;
    })
    $('body,html').animate({
        scrollTop: 0
    },20);
}
chkLis(pageid)